<template>
    <div class="constant-manage">
        <el-tabs v-model="activePane">
            <el-tab-pane label="数据集管理" name="datasetPane">
                <div class="btn">
                    <el-button type="primary" @click="dsDlg.visible=true">添加新数据集</el-button>
                </div>
                <div class="table">
                    <el-table :data="dataList" width="100%">
                        <el-table-column align="center"  prop="data_set_name" label="数据集名称"></el-table-column>
                        <el-table-column align="center"  prop="create_time" label="创建时间"></el-table-column>
                        <el-table-column  align="center" label="操作">
                            <template slot-scope="scope">
                                <i class="el-icon-delete cursor" @click="deleteDataItem(scope.row.data_set_id)"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next" :page-size="dataSetPagination.page_size"
                        :page-count="dataSetPagination.page_count" @current-change="dataSetChangePage">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据子集管理" name="subsetPane">
                <div class="btn">
                    <el-button type="primary" @click="subDsDlg.visible=true">添加数据子集</el-button>
                </div>
                <div class="table">
                    <el-table :data="subDataList">
                        <el-table-column align="center" prop="sub_set_name" label="数据集名称"></el-table-column>
                        <el-table-column align="center" prop="data_set_name" label="所属数据集"></el-table-column>
                        <el-table-column align="center" prop="create_time" label="创建时间"></el-table-column>
                        <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                                <i class="el-icon-delete cursor" @click="deleteSubDataItem(scope.row.sub_set_id)"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination background layout="prev, pager, next" :page-size="subSetPagination.page_size"
                        :page-count="subSetPagination.page_count" @current-change="subSetChangePage">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="添加标签" :visible.sync="dsDlg.visible" width="450px">
            <div class="dlg-content">
                <el-form :model="dsDlg.data" label-position="left" label-width="70px" :rules="dsDlg.rules" ref="dsForm">
                    <el-form-item label="标签：" prop="value">
                        <el-input v-model="dsDlg.data.value"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dsDlg.visible = false">取 消</el-button>
                <el-button type="primary" @click="submit('dsForm')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加数据子集" :visible.sync="subDsDlg.visible" width="450px">
            <div class="dlg-content">
                <el-form :model="subDsDlg.data" label-position="left" label-width="120px" :rules="subDsDlg.rules" ref="subDsForm">
                    <el-form-item label="数据子集名称：" prop="name">
                        <el-input v-model="subDsDlg.data.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="dataSetId" label="归属数据集：">
                        <el-select v-model="subDsDlg.data.dataSetId">
                            <el-option v-for="(item, index) in dataList" :key="'opt' + index" :value="item.data_set_id" :label="item.data_set_name"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="subDsDlg.visible = false">取 消</el-button>
                <el-button type="primary" @click="submit('subDsForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import DataSetService from '../../services/DataSetService.js'
import SubDataSetService from '../../services/SubDataSetService.js'
export default {
    data() {
        return {
            activePane:'datasetPane',
            dataSetService: new DataSetService,
            subSetService: new SubDataSetService,
            dataSetPagination:{
                page_size: 10,
                page_index: 1,
                page_count:1
            },
            subSetPagination: {
                page_size: 10,
                page_index: 1,
                page_count:1
            },
            dsDlg:{
                visible:false,
                data: {
                    value:''
                },
                rules:{
                    value:[{required: true, message: '请输入标签名称', trigger: 'blur'}]
                }
            },
            subDsDlg: {
                visible: false,
                data: {
                    name:'',
                    dataSetId:'',
                },
                rules:{
                    name:[{required: true, message: '请输入标签名称', trigger: 'blur'}],
                    dataSetId:[{required: true, message: '请选择数据集', trigger: 'change'}]
                }
            },
            dataList:[],
            subDataList:[]
        }
    },
    created() {
        this.getDataList();
        this.getSubDataSetList();
    },
    methods: {
        dataSetChangePage( pageIndex ) {
            this.getDataList( pageIndex );
        },
        subSetChangePage( pageIndex ) {
            this.getSubDataSetList( pageIndex );
        },
        async getDataList( pageIndex ) {
            let res = await this.dataSetService.getList( pageIndex?pageIndex:1, 10);
            if ( res.code == 200 ) {
                this.dataList = res.data.list;
                this.dataSetPagination = res.data.pagination;
            } else {
                this.dataList = [];
            }
        },

        async deleteDataItem( id ) {
            confirm = this.$confirm('确定删除该数据集？','提示').then( async () => {
                let res = await this.dataSetService.dele( id );
                if ( res.code == 200 ) {
                    this.$message({message:'删除成功！', type:'success', duration:1000});
                    this.getDataList();
                } else {
                    this.$message({message:'操作失败！', type:'error', duration:1000});
                }
            })
        },

        async getSubDataSetList( pageIndex ) {
            let res = await this.subSetService.getList( {page_index: pageIndex?pageIndex:1, page_size: 10} );
            if ( res.code == 200 ) {
                this.subDataList = res.data.list;
                this.subSetPagination = res.data.pagination;
            } else {
                this.subDataList = [];
            }
        },

        async deleteSubDataItem( id ) {
            confirm = this.$confirm('确定删除该数据子集？','提示').then( async () => {
                let res = await this.subSetService.dele( id );
                if ( res.code == 200 ) {
                    this.$message({message:'删除成功！', type:'success', duration:1000});
                    this.getSubDataSetList();
                } else {
                    this.$message({message:'操作失败！', type:'error', duration:1000});
                }
            })
        },

        async submit( formName ) {
            let valid = await this.$refs[formName].validate();
            if ( valid ) {
                if ( formName == 'dsForm' ) {
                    let result = await this.dataSetService.add(this.dsDlg.data.value);
                    if ( result.code == 200 ) {
                        this.$message({message:'添加成功！', type:'success', duration:1000});
                        this.dsDlg.visible = false;
                        this.$refs[formName].resetFields();
                        this.getDataList();
                    } else {
                        this.$message({message:'操作失败！', type:'error', duration:1000});
                    }
                } else {
                    let result = await this.subSetService.add(this.subDsDlg.data.name, this.subDsDlg.data.dataSetId);
                    if ( result.code == 200 ) {
                        this.$message({message:'添加成功！', type:'success', duration:1000});
                        this.subDsDlg.visible = false;
                        this.$refs[formName].resetFields();
                        this.getSubDataSetList();
                    } else {
                        this.$message({message:'操作失败！', type:'error', duration:1000});
                    }
                }
            }
        }
    }
}
</script>

<style scoped>
.constant-manage{
    display: flex;
}
.table{
    width: 100%;
}
.btn{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}
.el-select{
    width: 100%;
}
.el-table{
    width: 100%;
}
.el-tabs{
    width: 100%;
}
.el-pagination{
    margin-top: 15px;
    float: right;
}
</style>
